<template>
  <div class="game-box">
    <!-- 左上角 一排活动按钮 -->
    <div
      style="
        padding: 10px 0;
        display: flex;
        align-items: center;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 40;
        width: 100%;
        height: 8vh;
      "
    >
      <div
        style="
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 4vw;
        "
        v-for="(item, index) of 6"
        :key="'active' + index"
      >
        <div class="active-btn" style="background-color: red">
          {{ item }}
        </div>
        <div style="color:#fff;font-size: 14px;">活动名称</div>
      </div>
    </div>

    <!-- 右上角 时间图标 -->
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;
        top: 0;
        width: 3vw;
        height: 3vw;
        z-index: 40;
      "
    >
      <img style="width: 100%; height: 100%" :src="getdayPic()" />
    </div>

    <!-- 时间线 -->
    <div
      style="
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        height: 3%;
        width: 100%;
        z-index: 40;
      "
    >
      <!-- 时间线 -->
      <div
        style="
          position: relative;
          display: flex;
          align-items: flex-end;
          width: 100%;
          height: 100%;
        "
      >
        <div style="position: absolute; left: 24.3%; top: 0; font-size: 10px">
          早上
        </div>
        <div style="position: absolute; left: 49.3%; top: 0; font-size: 10px">
          中午
        </div>
        <div style="position: absolute; left: 74.3%; top: 0; font-size: 10px">
          晚上
        </div>
        <div
          v-for="(item, index) in 24"
          :key="'time-' + index"
          :class="timeIndex > index ? 'time-dot-box-active' : 'time-dot-box'"
        ></div>
      </div>
      <!-- 下一天 -->
      <div
        style="
          display: flex;
          align-items: flex-end;
          justify-content: center;
          height: 100%;
          width: 15%;
        "
      >
        <div class="next-day-btn" @click="nextDayStart">下一天</div>
      </div>
    </div>

    <!-- 下一天弹窗 -->
    <div
      class="popup-box"
      style="width: 30vw; height: 10%; z-index: 40"
      v-if="nextDayTipShow"
    >
      <!-- 标题 -->
      <div
        style="
          margin: 6px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 5%;
        "
      >
        <div class="popup-title">确定进入下一天？</div>
        <div class="popup-close-btn" @click="closeNextDayPopup()">×</div>
      </div>
      <!-- 内容 -->
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 100%;
          height: 95%;
        "
      >
        <div class="popup-confirm-btn" @click="confirmNextDay()">确定</div>
        <div class="popup-cancel-btn" @click="closeNextDayPopup()">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lingmengshui",
  data() {
    return {
      nextDayTipShow: false,
      timer: null,
      timeIndex: 0,
    };
  },
  methods: {
    // 获取时间图标
    getdayPic() {
      let src = require(`@/assets/img/morning-pic.png`);
      if (this.timeIndex >= 19) {
        src = require("@/assets/img/evening-pic.png");
      } else if (this.timeIndex >= 10) {
        src = require("@/assets/img/noon-pic.png");
      } else if (this.timeIndex >= 0) {
        src = require("@/assets/img/morning-pic.png");
      }
      return src;
    },
    // 确定下一天
    confirmNextDay() {
      this.nextDayTipShow = false;
      this.timeIndex = 0;
      let morningTimer = setInterval(() => {
        if (this.timeIndex <= 6) {
          this.timeIndex++;
        } else {
          clearInterval(morningTimer);
          this.dayTimegoing();
        }
      }, 500);
      // this.timeIndex = 6;
      // this.dayTimegoing();
    },
    // 取消下一天
    closeNextDayPopup() {
      this.nextDayTipShow = false;
    },
    // 时间进度条
    dayTimegoing() {
      this.timer = setInterval(() => {
        if (this.timeIndex < 24) {
          this.timeIndex++;
        } else {
          // this.timeIndex = 6;
          clearInterval(this.timer);
        }
      }, 1000 * 1);
    },
    // 下一天开始
    nextDayStart() {
      this.nextDayTipShow = true;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.active-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4vh;
  height: 4vh;
  cursor: pointer;
  user-select: none;
}
.active-btn:hover {
  width: 5vh;
  height: 5vh;
}

.next-day-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  width: 100%;
  border: 1px solid #fff;
  border-bottom: none;
  color: rgb(255, 255, 255);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  background-color: #f00;
}

.time-dot-box {
  margin-right: 0.1%;
  width: 4.15%;
  height: 50%;
  background-color: rgb(160, 160, 160);
  border-radius: 2px;
}

.time-dot-box-active {
  margin-right: 0.1%;
  width: 4.15%;
  height: 50%;
  background-color: rgb(24, 116, 244);
  border-radius: 2px;
}
</style>